<template>
  <div class="student-profile-container">
    <h2>学生个人信息管理</h2>

    <el-card class="profile-card">
      <div class="profile-header">
        <el-icon size="80" color="#409EFF" class="avatar-icon"><User /></el-icon>
        <div class="profile-basic-info">
          <h3>{{ studentInfo.name }}</h3>
          <p>{{ studentInfo.id }}</p>
          <p>{{ studentInfo.major }} - {{ studentInfo.class }}</p>
        </div>
      </div>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-form
            ref="studentForm"
            :model="studentInfo"
            :rules="rules"
            label-width="120px"
            label-position="left"
            style="margin-top: 20px"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input v-model="studentInfo.name" :disabled="true" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-input v-model="studentInfo.gender" :disabled="true" placeholder="请输入性别"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="学号">
                  <el-input v-model="studentInfo.id" :disabled="true" placeholder="请输入学号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业">
                  <el-input v-model="studentInfo.major" :disabled="true" placeholder="请输入专业"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="班级">
                  <el-input v-model="studentInfo.class" :disabled="true" placeholder="请输入班级"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入学日期">
                  <el-input v-model="studentInfo.entryDate" :disabled="true" placeholder="请选择入学日期"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系电话" prop="contact.phone">
                  <el-input v-model="studentInfo.contact.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电子邮箱" prop="contact.email">
                  <el-input v-model="studentInfo.contact.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" @click="submitForm('studentForm')">保存修改</el-button>
              <el-button @click="resetForm('studentForm')">重置</el-button>
              <el-button type="warning" @click="showPwdDialog = true" style="margin-left: 10px;">修改密码</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog title="修改密码" v-model="showPwdDialog" width="400px">
      <el-form :model="pwdForm" :rules="pwdRules" ref="pwdFormRef" label-width="100px">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="pwdForm.oldPwd" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdForm.newPwd" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPwd">
          <el-input v-model="pwdForm.confirmPwd" type="password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPwdDialog = false">取消</el-button>
        <el-button type="primary" @click="submitPwdForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { User } from '@element-plus/icons-vue'

export default {
  name: 'StudentProfile',
  components: {
    User
  },
  data() {
    return {
      activeTab: 'basic',
      studentInfo: {
        id: '202301001',
        name: '张三',
        gender: '男',
        major: '计算机科学与技术',
        class: '2023-1',
        contact: {
          phone: '13800138000',
          email: 'zhangsan@example.edu'
        },
        entryDate: '2023-09-01'
      },
      rules: {
        'contact.phone': [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        'contact.email': [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的电子邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      showPwdDialog: false,
      pwdForm: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      pwdRules: {
        oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value !== this.pwdForm.newPwd) {
                callback(new Error('两次输入的新密码不一致'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message.success('个人信息更新成功')
          // 这里可以添加实际的保存逻辑，例如调用后端接口
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitPwdForm() {
      this.$refs.pwdFormRef.validate(valid => {
        if (valid) {
          // 这里调用后端API修改密码
          this.$message.success('密码修改成功');
          this.showPwdDialog = false;
          // 清空表单
          this.pwdForm = { oldPwd: '', newPwd: '', confirmPwd: '' };
        }
      });
    }
  }
}
</script>

<style scoped>
.student-profile-container {
  padding: 20px;
}

.profile-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-icon {
  margin-right: 20px;
}

.profile-basic-info h3 {
  margin: 0 0 5px 0;
  font-size: 20px;
}

.profile-basic-info p {
  margin: 5px 0 0 0;
  color: #606266;
}
</style>
